<template>
  <j-modal
    switchFullscreen
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary" v-if="!disableSubmit">确认</a-button>
    </template>
    <div class="info-line" style="color: black;font-weight:500">基础信息</div>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
         <a-col :md="8" :sm="24">
           <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="物料名称">
             <a-input-search v-decorator="[ 'productName',validatorRules.productName]"
                             :disabled="disableSubmit" placeholder="请选择产品"
                             readOnly enter-button @search="productSearch('superiorUser')"/>
             <a-input v-decorator="[ 'productName',validatorRules.productName]" readOnly type="hidden"/>
           </a-form-item>
         </a-col>
         <a-col :md="8" :sm="24">
           <a-form-item
             :labelCol="labelCol"
             :wrapperCol="wrapperCol"
             label="物料编号"
           >
             <a-input v-decorator="['productCode']" disabled="true" placeholder="请输入"/>
           </a-form-item>
         </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品名称"
            >
              <a-input placeholder="请输入" :disabled="disableSubmit"
                       v-decorator="['goodsName',validatorRules.goodsName]"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品分类"
            >
              <a-input-search placeholder="请选择商品分类" v-decorator="[ 'classifyName',validatorRules.classifyName]"
                              :disabled="disableSubmit"
                              readOnly enter-button @search="productSearch1('superiorUser')"/>
              <a-input readOnly type="hidden" v-decorator="[ 'classifyName',validatorRules.classifyName]"/>
              <!--              <a-input placeholder='请输入' v-decorator="[ 'yw', validatorRules.address]" />-->
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品条码"
            >
              <a-input v-decorator="['goodsBarCode',validatorRules.goodsBarCode]" :disabled="disableSubmit"
                       placeholder="请输入"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="是否上架"
            >
              <cn-dict-select-tag
                dict-code="je_grounding"
                placeholder="请选择"
                triggerChange
                :disabled="disableSubmit"
                :options="{value:'dictDataCode',label:'dictDataDesc'}"
                v-decorator.trim="[ 'isSales']"/>
              <!--              <a-input placeholder='请输入' v-decorator="[ 'yw', validatorRules.address]" />-->
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="热销"
            >
              <cn-dict-select-tag
                dict-code="com_ hotcakes"
                placeholder="请选择热销"
                triggerChange
                :disabled="disableSubmit"
                :options="{value:'dictDataCode',label:'dictDataDesc'}"
                v-decorator.trim="['hotSales']"/>
              <!--              <a-input placeholder='请输入' v-decorator="[ 'yw', validatorRules.address]" />-->
            </a-form-item>
          </a-col>
         <a-col :md="8" :sm="24">
           <a-form-item
             :labelCol="labelCol"
             :wrapperCol="wrapperCol"
             label="有效期"
           >
             <a-range-picker style="width:100%" showTime format="YYYY-MM-DD HH:mm:ss" :disabled="disableSubmit"
                             value-format="YYYY-MM-DD HH:mm:ss" v-decorator="['rangePicker']"/>
           </a-form-item>
         </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="规格"
            >
              <a-input v-decorator="['goodsSpecifications']" disabled="true"
                       placeholder="请输入"/>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="是否新品"
            >
              <cn-dict-select-tag
                @change="xptiem"
                dict-code="je_product"
                placeholder="请选择"
                :disabled="disableSubmit"
                triggerChange
                :options="{value:'dictDataCode',label:'dictDataDesc'}"
                v-decorator.trim="['isNew']"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :md="8" :sm="24" v-if="model.isNew==1">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="新品有效期"
              style="margin-left: -5px"
            >
              <a-range-picker style="width:99%;margin-left: 4px" showTime format="YYYY-MM-DD" :disabled="disableSubmit"
                              value-format="YYYY-MM-DD" v-decorator="['newPicker']"/>
            </a-form-item>
          </a-col> -->
        </a-row>

        <div class="info-line" style="color: black;font-weight:500">单位信息</div>
        <!--    <a-form-model :label-col="labelCol" :model='form' :rules='rules' :wrapper-col="wrapperCol">-->
        <a-row :gutter="24">
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="基本单位"
            >
              <cn-dict-select-tag
                v-decorator="['basicUnit']"
                disabled="true"
                :options="{value:'dictDataCode',label:'dictDataDesc'}"
                dict-code="cpbasic_unit"
                placeholder="请选择"
                triggerChange/>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="info-line" style="color: black;font-weight:500">价格信息</div>
        <a-row :gutter="24">
          <a-col :md="8" :sm="24">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="建议零售价"
              prop="contacts"
            >
              <a-input  v-decorator="['marketingUnitMoney']" style="width: 80%"/>
              元
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
<!--    <div class="info-line" style="color: black;font-weight:500;margin-bottom: 10px">商品logo展示</div>-->
<!--    <a-spin :spinning="confirmLoading">-->
<!--      <a-form :form="form">-->
<!--        <a-row :gutter="24">-->
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item label="移动端" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--              <j-upload @change="pdLogoChange1" :oldList="imgList.type1" accept=".png,.jpg,.jpeg" fileType="image"-->
<!--                        class="avatar-uploader"-->
<!--                        :number="1" text="(172*116)"-->
<!--                        :disabled="disableSubmit"-->
<!--                        :returnUrl="false">-->
<!--              </j-upload>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form>-->
<!--    </a-spin>-->
    <div class="info-line" style="color: black;font-weight:500;margin-bottom: 10px">商品轮播图展示</div>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item label="移动端" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload @change="pdLogoChange3" :oldList="imgList.type3" accept=".png,.jpg,.jpeg" fileType="image"
                        class="avatar-uploader"
                        :number="4" text="(375*375)*4"
                        :disabled="disableSubmit"
                        :returnUrl="false"></j-upload>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="PC端" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload @change="pdLogoChange4" accept=".png,.jpg,.jpeg" :oldList="imgList.type4" fileType="image"
                        class="avatar-uploader"
                        :number="4" text="(400*400)*4"
                        :disabled="disableSubmit"
                        :returnUrl="false"></j-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <div class="info-line" style="color: black;font-weight:500;margin-bottom: 10px">商品详情图片展示</div>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item label="移动端" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload :oldList="imgList.type5" @change="pdLogoChange5" accept=".png,.jpg,.jpeg" fileType="image"
                        class="avatar-uploader"
                        :number="1" text="(375*~)"
                        :disabled="disableSubmit"
                        :returnUrl="false"></j-upload>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="PC端" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload @change="pdLogoChange6" :oldList="imgList.type6" accept=".png,.jpg,.jpeg" fileType="image"
                        class="avatar-uploader"
                        :number="1" text="(1160*~)"
                        :disabled="disableSubmit"
                        :returnUrl="false"></j-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <pro-chose ref="prochoose" name="产品" v-bind="modalProps" @okbro="okbropro"></pro-chose>
    <pro-chose ref="prochoose1" v-bind="modalProps1" :dataTypeList='dataType' name="商品分类" @okbro="okbropro1"></pro-chose>
  </j-modal>
</template>

<script>
import proChose from '@comp/cn-components/ProChose'
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import myShuttleModal from '@/components/cn-components/CnShuttleModal'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import { isMobile, isPermit } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import JUpload from '@/components/cn-form/JUpload'
import Area from '@/components/utils/Area'

export default {
  name: 'userorgerlModal',
  data() {
    return {
      // dataType:['1','2','4'],
      name: '',
      //formModel表单验证规则
      rules: {
        contacts: [
          { required: true, message: '', trigger: 'submit' },
        ],
      },
      auxiliary: false,//辅助单位
      sendPro: false,
      remarks: '',
      dataSurces: [],
      // dataSurces3: [],
      manobjList: [0],
      areaData: '',
      materialCode: '',
      areaLinkage: '',
      flbm: '',
      title: '操作',
      visible: false,
      isEdit: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        productName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        classifyName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        goodsName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        sort: {
          rules: [
            { required: true, message: '' }
          ]
        },
        //商品条码
        goodsBarCode:{
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      imgList: {
        type1: [],
        type2: [],
        type3: [],
        type4: [],
        type5: [],
        type6: [],
      },
      queryById: '/goods/cnGoods/getGoodsInfo',

      addOrUpdateUrl: window._CONFIG['domianURL'] + '/cnTerminalController/saveOrUpdateTerminal'
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage, JUpload, proChose, myShuttleModal },
  created() {

  },
  computed: {
    modalProps() {
      return {
        name: this.name
      }
    },
    modalProps1() {
      return {
        name: this.name
      }
    }

  },
  methods: {
    //辅助单位
    auxiliaryBtn() {
      this.auxiliary = true
    },

    okbropro(val, status, status2) {
      let objs = JSON.parse(JSON.stringify(val[0]))
      console.log('产品信息', objs)
      this.form.setFieldsValue({
        productName: objs.materialName,
        productCode: objs.materialCode,
        goodsName:objs.materialName,
        basicUnit:objs.meins,
        basicUnitStr:objs.meinst,
        goodsSpecifications:objs.model,
      })
      this.model.basicUnitStr=objs.meinst
      this.model.materialCode = objs.materialCode
    },
    okbropro1(val, status, status2) {
      let objs = JSON.parse(JSON.stringify(val[0]))
      this.form.setFieldsValue({
        classifyName: objs.classifyName,

      })
      this.model.classifyCode = objs.classifyCode
    },
    add() {
      this.edit()
    },
    edit(isEdit) {
      console.log(isEdit)
      this.visible = true
      this.form.resetFields()
      this.model = Object.assign({}, isEdit)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, this.model.isSales = 1,Object.keys(this.model)))
      })
      if (isEdit) {

        postAction(this.queryById, { goodsCode: isEdit.goodsCode }).then((res) => {
          if (res.success) {
            let record = res.result
            this.model = Object.assign({}, record)
            this.model.rangePicker = [this.model.startTime, this.model.endTime]
            this.model.newPicker = [this.model.newStartTime, this.model.newEndTime]
            this.model.isSales = record ? record.isSales : 1
            this.visible = true
            if (this.model.goodsFiles) {
              this.model.goodsFiles.forEach((item, index) => {
                item.uid = index
                item.status = 'done'
                if (item.platformType == 1 && item.type == 1) {
                  this.imgList.type1.push(item)
                } else if (item.platformType == 2 && item.type == 1) {
                  this.imgList.type2.push(item)
                } else if (item.platformType == 1 && item.type == 2) {
                  this.imgList.type3.push(item)
                } else if (item.platformType == 2 && item.type == 2) {
                  this.imgList.type4.push(item)
                } else if (item.platformType == 1 && item.type == 3) {
                  this.imgList.type5.push(item)
                } else if (item.platformType == 2 && item.type == 3) {
                  this.imgList.type6.push(item)
                }
              })
              // console.log(this.imgList)
            }
            let fieldsVal = pick(this.model, 'productName', 'productCode','auxiliaryUnit','unitConvert', 'marketingUnitMoney', 'goodsName', 'classifyName', 'isSales', 'hotSales', 'basicUnit', 'marketingUnit', 'startTime'
              , 'endTime', 'isNew', 'sort', 'logoMobile', 'logoPc', 'shufflingMobile', 'rangePicker', 'newPicker', 'shufflingPc', 'detailMobile', 'detailPc',
              'newStartTime', 'newEndTime','goodsBarCode','goodsSpecifications')
            this.$nextTick(() => {

              this.form.setFieldsValue(fieldsVal)
            })
          }
        })
      }
    },
    handleCancel() {
      this.$emit('close')
      this.form.resetFields()
      this.isEdit = false
      this.imgList = {
        type1: [],
        type2: [],
        type3: [],
        type4: [],
        type5: [],
        type6: [],
      }
      this.model = {}
      this.visible = false
    },
    handleOk() {
      console.log(this.imgList)
      let that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(that.model, values)
          if (formData.rangePicker) {
            formData.startTime = formData.rangePicker[0]
            formData.endTime = formData.rangePicker[1]
          }
          if (formData.newPicker) {
            formData.newStartTime = formData.newPicker[0]
            formData.newEndTime = formData.newPicker[1]
          }

          // formData.materialCode=this.materialCode
          // formData.classifyCode=this.flbm
          formData.goodsFiles = []
          for (let i in that.imgList) {
            that.imgList[i].forEach(item => {
              item.type = item.type ? item.type : item.types
              delete item.status
              formData.goodsFiles.push(item)
            })

          }
          // console.log('数据',formData)
          postAction('/goods/cnGoods/saveOrUpdate', formData).then((res) => {
            if (res.success) {
              that.handleCancel()
              that.$message.success(res.message, 2)
              that.$emit('ok')

            } else {
              that.$message.error(res.message, 2)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    pdDetailChange(e) {
      this.model.detailPc = e[0].url
    },
    xptiem(e) {
      this.$set(this.model, 'isNew', e)
    },
    pdLogoChange1(i,e) {
      console.log(e)
      this.imgList.type1 = []
      e.forEach(item => {
        this.imgList.type1.push({
          platformType: 1,
          types: 1,
          url: item.url,
          name: item.name,
          uid: item.uid,
          status: 'done'
        })
      })
    },
    pdLogoChange2(e) {
      this.imgList.type2 = []
      e.forEach(item => {
        this.imgList.type2.push({
          platformType: 2,
          types: 1,
          url: item.url,
          name: item.name,
          uid: item.uid,
          status: 'done'
        })
      })
    },
    pdLogoChange3(e) {
      console.log(e)
      this.imgList.type3 = []
      e.forEach(item => {
        this.imgList.type3.push({
          platformType: 1,
          types: 2,
          url: item.url,
          name: item.name,
          uid: item.uid,
          status: 'done'
        })
      })
    },
    pdLogoChange4(e) {
      this.imgList.type4 = []
      e.forEach(item => {
        this.imgList.type4.push({
          platformType: 2,
          types: 2,
          url: item.url,
          name: item.name,
          uid: item.uid,
          status: 'done'
        })
      })
    },
    pdLogoChange5(e) {
      this.imgList.type5 = []
      e.forEach(item => {
        this.imgList.type5.push({
          platformType: 1,
          types: 3,
          url: item.url,
          name: item.name,
          uid: item.uid,
          status: 'done'
        })
      })
    },
    pdLogoChange6(e) {
      this.imgList.type6 = []
      e.forEach(item => {
        this.imgList.type6.push({
          platformType: 2,
          types: 3,
          url: item.url,
          name: item.name,
          uid: item.uid,
          status: 'done'
        })
      })
    },
    close() {
      // this.handleCancel()
    },
    productSearch(status) {
      this.$refs.prochoose.rowKey = 'id'
      let formconfig = [
        {
          key: 'materialCode',
          label: '产品编号'
        },
        {
          key: 'materialName',
          label: '物料名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '产品编号',
            align: 'left',
            dataIndex: 'materialCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '物料名称',
            align: 'left',
            dataIndex: 'materialName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/material/findPageUnassignedList',
        multiple: false,
        columW: 10
      }

      this.name = '用户'
      let dataSource = []
      if (this.form.getFieldValue('superiorUser')) {
        dataSource = [{
          materialCode: this.form.getFieldValue('superiorUser'),
          productName: this.form.getFieldValue('realsname'),
        }]
      }
      console.log(dataSource)
      this.$refs.prochoose.edit(formconfig, tableconfig, 'superiorUser', 'realsname', dataSource)
    },
    productSearch1(status) {
      this.$refs.prochoose1.rowKey = 'id'
      let formconfig = [
        {
          key: 'classifyCode',
          label: '分类编号'
        },
        {
          key: 'classifyName',
          label: '分类名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '分类编号',
            align: 'left',
            dataIndex: 'classifyCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '分类名称',
            align: 'left',
            dataIndex: 'classifyName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/goodsclassify/cnGoodsClassify/findPageList',
        multiple: false,
        columW: 10
      }

      this.name = '用户'
      let dataSource = []
      if (this.form.getFieldValue('superiorUser')) {
        dataSource = [{
          userName: this.form.getFieldValue('superiorUser'),
          realName: this.form.getFieldValue('classifyCode')
        }]
      }
      console.log(dataSource)
      this.$refs.prochoose1.edit(formconfig, tableconfig, 'superiorUser', 'realsname', dataSource)
    },
  }
}
</script>

<style lang="less" scoped>
.info-line {
  display: flex;
  flex-direction: row;
}

.info-line:before {
  content: "";
  flex: 0.1;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}

.info-line:after {
  content: "";
  flex: 0.9;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}

.auxiliaryBtn {
  color: #2eabff;
  cursor: pointer;
  margin-top: 10px;
}
</style>
